<template>
<div class="container">
    
    <div class="header-container">
        
        <div class="logo"></div>
        <router-link to ="search">
            <div class="search-container">
                
                <span class="iconfont">&#xe634;</span>
                <span class="search-text">EDG直呼内行! </span>
                
            </div>
        </router-link>

        <div class="download-text">
            {{userInfo?userInfo.nickName:'马上登录'}}
        </div>
        <div class="menu-icon" @click="showMenu">
            <span  class="iconfont" v-if="show">&#xe734;</span>
            <span  class="iconfont" v-else>&#xe606;</span>
        </div>
    </div>
    <div class="menu-list-contianer" :class="show?'show-menu':'close-menu'">
        <div class="menu-item">
            <span class="icon iconfont">&#xe610;</span>
            <span>首页</span>
        </div>
        <router-link to="register">
            <div class="menu-item">
                <span class="icon iconfont">&#xe60b;</span>
                <span>我的主页</span>
            </div>
        </router-link>
        <div class="menu-item" @click.stop="logout">
            <span class="icon iconfont">&#xe66d;</span>
            <span>退出账户</span>
        </div>
    </div>
    <div @click="showMenu" class="mask" v-show="show">
    </div>
</div>
  
</template>

<script>
export default {
    name: 'home-header',
    data: () => {
        return {
            show: false,
            userInfo:null,
        }
    },
    methods: {
        showMenu() {
            this.show = this.show ? false : true;
        },
        logout() {
            localStorage.clear();
            this.$router.go(0);
        }
    },
    beforeMount(){
        //检查localStorage中是否含有userInfo信息;
        if(localStorage.getItem('userInfo')){
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        }
        console.log(this.userInfo);
        
    }
}
</script>

<style lang="less" scoped>
    @import '../../../assets/styles/common.less';
    a{
        text-decoration: none;
        color: #999;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        cursor: default;
        flex: 1;
    }
    .container{
        height:53rem / @baseFont;
    }
    .header-container{
        
        z-index:100;
        width: 100%;
        position: fixed;
        display: flex;
        align-items: center;
        height:53rem / @baseFont;
        background-color: #fff;
        border-bottom: 1rem / @baseFont solid #f6f6f6;
    }
    .search-container{
        background-color: hsla(0,0%,92.2%,.72);
        display: flex;
        align-items: center;
        color:#999;
        border-radius: 16rem / @baseFont;
        height:32rem / @baseFont;
        flex:1;
        margin: 0 12rem / @baseFont;
        font-size: 15rem / @baseFont;
       -webkit-appearance: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 15rem / @baseFont;
        .search-text{
            margin-left: 5rem / @baseFont;
            -webkit-appearance: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .download-text{
        color: #0084ff;
        font-size: 15rem / @baseFont;
        border-right: 1rem / @baseFont solid #ebebeb;
        padding-right: 16rem / @baseFont;
    }
    .menu-icon{
        color:#999;
        margin: 0  20rem / @baseFont;
    }
    .menu-list-contianer{
        z-index: 99;
        width:100%;
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 53rem / @baseFont;
        background-color: #fff;
        overflow: hidden;
        transform: translateY(-80%);
        .menu-item{
            font-size: 16rem / @baseFont;
            display: flex;
            align-items: center;
            margin: 0 16rem / @baseFont;
            color: #444;
            height: 56rem / @baseFont;
            border-bottom: 1rem / @baseFont solid #f6f6f6;
            .icon{
                font-size: 24rem / @baseFont;
                margin-right: 14rem / @baseFont;
            }
        }
    }
    .mask{
        position: fixed;
        top:53rem / @baseFont;
        bottom:0;
        left: 0;
        right: 0;
        height: 100%;
        z-index: 98;
        background-color: rgba(26,26,26,.65);
    }
    .show-menu{
        animation: pull-down 0.4s forwards;
    }
    .close-menu{
        display: none;
    }
    @keyframes pull-down {
        from{
            transform: translateY(-80%);
        }
        to{
            transform: translateY(0%);
        }
    }
    @keyframes pull-up{
        from{
            transform: translateY(0%);
        }
        to{
            transform: translateY(-100%);
        }
    }
</style>
